<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="renderer" content="webkit|ie-stand">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,target-densityDpi=device-dpi">
	<meta http-equiv="X-UA-Compatible" content="edge" />
	<title>都城快餐 - 点餐</title>
	<link href="/static/lunch/css/bootstrap.min.css" rel="stylesheet">
	<style>
.badge-hot {
	background-color: red;
}
	</style>
</head>
<body>
<div class="container">
<div class="row">
	<div class="navbar-form navbar-right" role="form">
	  <div class="form-group">
	  	{% if user %}
	    <p class="navbar-text navbar-right"> 当前已登录: {% if user.name %}{{user.name}}{% else %}{{ user.user }}{% endif %} 
	    	<span {% if balance_notify %} style="color: red;" {% endif %}>当前余额: {{user.balance}}</span>
	    	<a href="logout/" class="navbar-link" title="退出"> 退出 </a>
	    </p>
	    {% else %}
	    <input type="text" class="form-control" placeholder="输入姓名全拼/邮箱前缀" id="name">
	    {% endif %}
	  </div>
	  {% if user %}{% else %}
	  <button class="btn btn-default" id="loginbtn">LogIn</button>
	  {% endif %}
  	<div class="alert alert-danger alert-sm alert-dismissible" style="display:none" role="alert"></div>
	</div>
</div>

<div class="row">
	<div class="col-md-3">
		<div class="panel panel-primary">
		  <div class="panel-heading">今日热门</div>
		  <ul class="list-group">
		  {% for order in orders %}
		  	<li class="list-group-item" data_price="{{food.price}}">
		  		{% if order.user.name %} {{ order.user.name }}{% else %}{{order.user.user}} {% endif %} 点了 
				<!--
		  		<a href='javascript:;' class="click_menu" data_item="{{order.food}}" title="我也点这个,  ￥{{order.price}}">{{ order.food }}</a>
				-->
				{{order.food}}
		  	</li>
		  {% empty %}
		  	<li class="list-group-item">还没有人开始，快来抢沙发。</li>
		  {% endfor %}
		  </ul>
		</div>
		<br />
		<br />
		<div class="panel panel-primary">
			<div class="panel-heading">汇总</div>
			<table class="table table-hover">
				<tr>
					<th>菜品</th>
					<th>数量</th>
				</tr>
				{% for collect in collects %}
				<tr>
					{% for field in collect %}
					<td>{{field}}</td>
					{% endfor %}
				</tr>
				{% empty %}
				<tr><td colspan="2">暂无记录</td></tr>
				{% endfor %}
				<tr>
					<td>合计金额</td>
					<td>￥{% if sum_money %}{{sum_money}}{% else %} 0.0 {% endif %}</td>
				</tr>
			</table>
		</div>
	</div>

	<div class="col-md-6">
		{% if today %}
		<div class="panel panel-success">
			<div class="panel-heading"> 当日菜单
				<div style="float: right;">
					<a href="javascript:sort_foods(sort_by_price);" id="sort_price"> 价格排序 </a>
					<a href="javascript:sort_foods(sort_by_hint);">热门程度</a>
					<input type="search" id="filter_input" placeholder="快速筛选" title="快速筛选 - 支持拼音- 算法还不是很精确 - IE浏览器会有卡顿">
				</div>
			</div>
		{% else %}
		<div class="panel panel-danger">
			<div class="panel-heading">已过饭点，客官明日再来吧。</div>
		{% endif %}
			<ul class="list-group today_menu">
			{% for food in foods %}
				{% if today %}
				<li class="list-group-item" data_price="{{food.price}}">
					<a href='javascript:;' class="click_menu" data_item="{{food.id}}" title="单击订餐，在指定时间内可随意更换">{{ food.name }}  ￥{{food.price}}</a>
					{% if food.hint %}
					<span class="badge badge-hot" title="有{{food.hint}}人点{{food.name}}">{{food.hint}}</span>
					{% endif %}
				</li>
				{% else %}
				<li class="list-group-item disabled">
					{{ food }}  ￥{{food}}
					{% if food.hint %}
					<span class="badge" title="有{{food.hint}}人点{{food.name}}">{{food.hint}}</span>
					{% endif %}
				</li>
				{% endif %}
			{% endfor %}
			</ul>
		</div>
	</div>

<div class="col-md-3">
	{% if user %}
	<div class="panel panel-primary">
	  <div class="panel-heading">我的记录</div>
	  <ul class="list-group">
	  {% for record in user.record_set.all %}
	  	<li class="list-group-item">{{record.oprdate}} {{ record.food }}</li>
	  {% empty %}
	  	<li class="list-group-item disabled">暂无记录</li>
	  {% endfor %}
	  </ul>
	</div>
	
	<div class="panel panel-primary">
		<div class="panel-heading">我的菜单</div>
		<ul class="list-group">
			{% for record in today_records %}
			<li class="list-group-item">{{ record.food }}
				<a href="javascript:;" class="remove_btn" data_itemid="{{record.id}}" style="float: right;"><span class="glyphicon glyphicon-remove"></span></a>
			</li>
			{% empty %}
			<li class="list-group-item disabled">暂无</li>
			{% endfor %}
		</ul>
	</div>
	
	<div class="panel panel-primary">
		<div class="panel-heading">猜你喜欢</div>
		<ul class="list-group">
			{% for recommend in recommends %}
			<li class="list-group-item" title="￥ {{recommend.food.price}}">
				<a href='javascript:;' class="click_menu" data_item="{{recommend.food.id}}" title="￥{{recommend.food.price}}">
					{{ recommend.food.name }}
				</a>
			</li>
			{% empty %}
			<li class="list-group-item disabled">暂无</li>
			{% endfor %}
		</ul>
	</div>
	{% endif %}
</div>
	
</div>
</div>

<div class="modal fade" id="logindlg" tabindex="-1" role="dialog" aria-labelledby="logindlg" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">已发送登录邮件</h4>
      </div>
      <div class="modal-body">
        <p>已将一封含有登录链接的邮件发送至您的公司邮箱，请登录<a href='http://mail.useease.com' target='_blank'>查收</a>，并点击邮箱内的链接登录。</p>
        <p>如您未收到登录链接邮件，请检查您的拼写，并再次尝试。邮件的发送通常有<b>两到三分钟</b>的延迟，还请您耐心等待。</p>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="charge_warn_dlg" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">您的钱包余额已不足</h4>
      </div>
      <div class="modal-body">
        <p><img src="/static/lunch/images/empty_wallet.png" alt="钱包空空"></p>
      </div>
    </div>
  </div>
</div>


<script src="/static/lunch/js/jquery-1.9.1.min.js"></script>
<script src="/static/lunch/js/bootstrap.min.js"></script>
<script src="/static/lunch/js/pinyin.js"></script>
<!--[if lt IE 9]>
  <script src="/static/lunch/js/html5shiv.js"></script>
  <script src="/static/lunch/js/respond.min.js"></script>
<![endif]-->

<script>
var sort_flag = 1;

function levenshtein(s1, s2) {
  // init
  var d = [
  ],
  m = s1.length,
  n = s2.length,
  i,
  j;
  for (i = 0; i <= m; i++) {
    d[i] = [
    ];
    d[i][0] = i;
  }
  for (j = 0; j <= n; j++) {
    d[0][j] = j;
  }
  for (j = 1; j <= n; j++) {
    for (i = 1; i <= m; i++) {
      if (s1[i] === s2[j]) {
        d[i][j] = d[i - 1][j - 1];
      } else {
        d[i][j] = Math.min(d[i - 1][j] + 1, // a deletion
        d[i][j - 1] + 1, // an insertion
        d[i - 1][j - 1] + 1 // a substitution
        )
      }
    }
  }
  return d[m][n];
}

function similarity(s1, s2) {
  return 1 - levenshtein(s1, s2) / Math.max(s1.length, s2.length);
};

function sort_by_distance(key_str) {
  var ul_el = $(".today_menu")[0];
  var els = ul_el.getElementsByTagName("li");
  var arr = [];
  for(var i=0; i != els.length; ++i) {
    arr.push(els[i]);
  }
  
  arr.sort(function(el_a, el_b) {
    var index_a = $(el_a.getElementsByTagName("a")).attr("data-index");
    var index_b = $(el_b.getElementsByTagName("a")).attr("data-index");
    return similarity(index_b, key_str) - similarity(index_a, key_str);
  });
  $(ul_el).append(arr);
}

function sort_by_price(a, b) {
  var price_a = parseFloat($(a).attr("data_price"));
  var price_b = parseFloat($(b).attr("data_price"));
  return price_a - price_b;
}

function sort_by_hint(a, b) {
  var span_a_els = a.getElementsByTagName("span");
  var span_b_els = b.getElementsByTagName("span");
  var val_a = 0, val_b = 0;
  if(span_a_els.length !== 0) {
    val_a = parseInt(span_a_els[0].innerHTML);
  }
  if(span_b_els.length !== 0) {
    val_b = parseInt(span_b_els[0].innerHTML);
  }
  
  return val_b - val_a;
}

function sort_foods(func) {
  var ul_el = $(".today_menu")[0];
  var els = ul_el.getElementsByTagName("li");
  var arr = [];
  for(var i=0; i!=els.length; ++i) {
  	arr.push(els[i]);
  }
  sort_flag ^= 1;
  
  if(sort_flag) {
  	arr.sort(function(a, b) {
  		return -1 * func(a, b)
  	});
  } else {
	arr.sort(func);
  }
  $(ul_el).append(arr);
}

function alert_toggle() {
	$("div.alert").fadeToggle();
}

$("#loginbtn").click(function(){
	var name=$("#name").val();
	if(name==="") {
		$("div.alert").addClass("alert-danger");
		$("div.alert").text("请输入有效姓名全拼");
		$("div.alert").fadeToggle();
		setTimeout(alert_toggle, 2000);
		return "";
	}
	$.ajax({
		type: 'POST',
		data: {'user': name},
		url: 'login/',
		success: function(obj) {
			$("#logindlg").modal({
				keyboard: false
			});
		},
		error: function(err, xhr) {
			$("div.alert").addClass("alert-danger");
			$("div.alert").text("登录失败");
			$("div.alert").fadeToggle();
			setTimeout(alert_toggle, 2000);
			$("#name")[0].value = "";
			$("#name").focus();
		}
	});
});

$(".click_menu").click(function(){
	var data_item = $(this).attr("data_item");
	$.ajax({
		type:"POST",
		url: 'order/',
		data: {'item': data_item },
		success: function(obj) {
			window.location.href='';
		},
		error: function(err, xhs, ehr) {
			alert("点菜失败: " + err.responseText);
		}
	});
});

$(".abort_today").click(function() {
	$.ajax({
		type: "POST",
		url: "abort_today/",
		success: function(obj) {
			alert(obj);
			window.location.href = '';
		},
		error: function(err, xhr) {
			alert("取消失败: " + err.responseText);
		}
	});
});

$(".remove_btn").click(function(){
	var itemid = $(this).attr("data_itemid");
	$.ajax({
		url: 'abort/' + itemid + '/',
		type: "POST",
		success: function(obj) {
			window.location.href = '';
		},
		error: function(ehr, err, xhr) {
			alert("取消失败: " + ehr.responseText);
		}
	});
});

//快速搜索
$(document).ready(function() {
	var els = $(".today_menu li a");
	for(var i=0; i != els.length; ++i) {
	  var cur_el = $(els[i]);
	  var food_ch = cur_el.html();
	  var food_py = CC2PY(food_ch).toLowerCase();
	  cur_el.attr("data-index", food_ch + food_py);
	}
});

$('body').on('keyup', '#filter_input', function (ev) {
  var cur_val = $('#filter_input').val();
  sort_by_distance(cur_val);
});

{% if balance_notify %}
$(document).ready(function(){
	$("#charge_warn_dlg").modal({
		keyboard: false
	});
});
{% endif %}
</script>
</body>
</html>
